<template>
    <div class="">
        <div class="" id="main">
            <div @click="share_visible = false" class="video-window" style="height: 92vh;">
                <div class="height-100b position-relative">
                    <div @click="share_visible = false" id="players"></div>
                    <div :style="videoBg" @click="share_visible = false" class="video-window-player height-93b bg-eee"
                        id="video-window-player" style="margin-top: -65%;"></div>
                    <!-- 左下角视频简介部分 -->
                    <div class="author-info">
                        <div class="color-eee font-18 cursor-pointer"
                            @click="toPath('/user-homepage?user_id=' + creation.author.id)">
                            @{{ creation.author.name }}</div>
                        <div class="color-fff mt-8 font-16 text-line3">
                            <span class="color-eee">{{ creation.creation_name }}</span>
                            <span :key="index" class="color-yellow-light cursor-pointer"
                                v-for="(item, index) in creation.labels">#{{ item }}</span>
                        </div>
                        <div class="position-absolute color-fff need-pay marginTop5 hand" v-if="creation.ad_info">
                            <span>广告</span>
                            <span @click.stop="openAd(creation.ad_info.url)" class="pl-5 color-yellow-light">
                                跳转详情
                                <i class="el-icon-arrow-right"></i>
                            </span>
                        </div>
                    </div>
                    <div class="need-recharge" style="z-index: 100000;" v-show="need_recharge">
                        <div class="need-recharge-close">
                            <i @click="need_recharge = false"
                                class="el-icon el-icon-close color-fff cursor-pointer font-12"></i>
                        </div>
                        <el-image :src="require('@/assets/icon/live/coin.png')" fit="cover"
                            style="width: 65px;height: 65px;margin-top: 23px;"></el-image>
                        <div class="mt-15 font-18 color-fff">{{$store.state.config.coin_name}}不足</div>
                        <div class="mt-5 color-fff font-13">{{$store.state.config.coin_name}}余额不足 请先充值</div>
                        <div @click="toRecharge" class="need-recharge-recharge cursor-pointer">立即充值</div>
                    </div>
                    <!-- 视频右边是作者信息 -->
                    <div class="more-info flex flex-dre-column">
                        <div @click="toPath('/user-homepage?user_id=' + creation.author.id)"
                            class="position-relative cursor-pointer">
                            <el-avatar :size="45" :src="creation.author.avatar"></el-avatar>
                            <div  @click.stop="attentionFun(creation.author.id,creation)" class="position-absolute more-info-attention cursor-pointer" v-if="!creation.attention">+
                            </div>
                        </div>
                        <div class="mt-20 color-fff font-15 text-center flex flex-dre-column align-center" >
                            <div v-show="!like_loading">
                                <el-image :src="require('@/assets/icon/video/like.png')"
                                    @click.stop="likeAction(1); share_visible = false" class="cursor-pointer" fit="fill"
                                    style="width: 32px;height:32px;" v-show="!creation.liked_count"></el-image>
                                <el-image :src="require('@/assets/icon/video/liked.png')"
                                    @click.stop="likeAction(0); share_visible = false" class="cursor-pointer" fit="fill"
                                    style="width: 32px;height:32px;" v-show="creation.liked_count"></el-image>
                            </div>
                            <el-image :src="require('@/assets/gif/liking.gif')" class="cursor-pointer" fit="fill"
                                style="width: 32px;height:32px;" v-show="like_loading"></el-image>
                            <span>{{ creation.like_count | formatNumber }}</span>
                        </div>
                        <div @click.stop="is_fullFun"
                            class="mt-13 color-fff font-15 text-center flex flex-dre-column align-center">
                            <el-image :src="require('@/assets/icon/video/comment.png')" class="cursor-pointer" fit="fill"
                                style="width: 32px;height:32px;"></el-image>
                            <span>{{ creation.comment_count | formatNumber }}</span>
                        </div>
                        <div @click.stop="share_visible = !share_visible"
                            class="mt-13 color-fff font-15 text-center flex flex-dre-column align-center position-relative">
                            <el-image :src="require('@/assets/icon/video/share.png')" class="cursor-pointer" fit="fill"
                                style="width: 32px;height:32px;"></el-image>
                            <!-- <span>{{ creation.forwards | formatNumber }}</span> -->
                        </div>
                        <div @click.stop="$refs.complaint.visible = true"
                            class="mt-13 color-fff font-13 text-center flex flex-dre-column align-center">
                            <el-image :src="require('@/assets/icon/video/complaint.png')" class="cursor-pointer" fit="fill"
                                style="width: 32px;height:32px;"></el-image>
                            <span>举报</span>
                        </div>

                        <div class="mt-30 more-info-next-prev color-fff font-28">
                            <div :style="index == 0 ? 'pointer-events: none;color:#999' : ''"
                                @click.stop="prev">
                                <i class="el-icon el-icon-arrow-up cursor-pointer"></i>
                            </div>
                            <div @click.stop="next" class="mt-40">
                                <i class="el-icon el-icon-arrow-down cursor-pointer"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 视频底部进度条控制部分 -->
                <div class="video-window-process  bg-white"></div>
            </div>


        </div>
        <div class="position-absolute share-card" v-if="share_visible">
            <div class="color-fff">分享视频</div>
            <div class="font-18 color-fff flex align-center mt-10 share-box">
                <div @click.stop="changeFriendIndex('decrement')" class="width-8b text-center">
                    <i class="el-icon-arrow-left cursor-pointer"></i>
                </div>
                <div class="flex align-center width-84b scroll-friend" ref="friend" style="scroll-behavior: smooth;" v-if="contacters.length > 0">
                    <div :class="{ 'ml-4': index > 0 }" :key="index" v-for="(item, index) in contacters">
                        <div @click.stop="shareToFriend(item.userProfile.userID)" class="width-60 text-center cursor-pointer">
                            <div class="flex jus-center">
                                <el-avatar :size="45" :src="item.userProfile.avatar"></el-avatar>
                            </div>
                            <div :title="item.userProfile.nick" class="font-13 text-line1">{{ item.userProfile.nick }}</div>
                        </div>
                    </div>
                </div>
                <div class="text-center flex-1 color-999" v-else>暂无好友，去找别人聊聊吧~</div>
                <div @click.stop="changeFriendIndex('increment')" class="width-8b text-center">
                    <i class="el-icon-arrow-right cursor-pointer"></i>
                </div>
            </div>
            <div @click.stop="copyLink" class="mt-20 text-center pt-8 pb-8 color-fff width-90b cursor-pointer flex align-center jus-center" style="margin-left:5%;border:1px solid #353047;">
                <i class="el-icon-paperclip font-14"></i>
                <span>复制链接</span>
            </div>
        </div>
        <need-pay :creation="creation" @donePay="donePay" @needRecharge="need_recharge = true" ref="fee"></need-pay>
        <complaint :creation="creation" ref="complaint"></complaint>
    </div>
</template>

<script>
import Player from 'xgplayer'
// import volume from 'xgplayer/dist/controls/volume';
// import playbackRate from 'xgplayer/dist/controls/playbackRate';
// import HlsJsPlayer from 'xgplayer-hls.js'
import complaint from '@/components/video/complaint.vue'
import needPay from '@/components/video/need-pay.vue'
// import comment from './comment'
// import creation from './creation/short.vue'
import { Events } from 'xgplayer'
import HlsPlayer from 'xgplayer-hls'
import 'xgplayer/dist/index.min.css'
import sortPlugin from '@/components/video/player-plugin/sort'
import fullIcon from '@/assets/icon/video/full.png'
import mutedIcon from '@/assets/icon/video/muted_empty.png'
import mutedInvalidIcon from '@/assets/icon/video/muted_invalid_empty.png'
export default {
    components: {
        // comment,
        // creation,
        needPay,
        complaint,
    },
    data() {
        return {
            visible: false,
            players: null,
            is_full: false,
            active: 'comment',
            total: 0,
            like_loading: false,
            share_visible: false,
            need_recharge: false,
            submitComplete:false,
            current_friend_index:0,
            creation:{}
        }
    },
    props: {
        index: {
            type: Number,
            default: 0,
        },
    },

    model: {
        // 需要双向绑定的 props 变量名称，也就是父组件通过 v-model 与子组件双向绑定的变量
        prop: 'creation',
        // 定义由 $emit 传递变量的名称
        event: 'newValue'
    },
    computed: {
        videoBg() {
            return "background:url('" + this.creation.first_frame + "') no-repeat center center;background-size:cover;overflow: hidden;filter: blur(30px);"
        },
        playerStyle() {
            return ''
        },
        contacters() {
            return this.$store.state.system.contacters
        },
    },
    watch: {

    },
    mounted() {

    },
    methods: {
        prev(){
            this.$refs.fee.visible = false; 
            this.$refs.fee.step = 1; 
            this.$refs.fee.msg = ''; 
            this.$refs.fee.msgLength = 0
            this.$emit('prev');
            this.share_visible = false; 
            this.players.currentTime = 0;
        },
        next(){
            this.$refs.fee.visible = false; 
            this.$refs.fee.step = 1; 
            this.$refs.fee.msg = ''; 
            this.$refs.fee.msgLength = 0
            this.$emit('next');
            this.share_visible = false; 
            this.players.currentTime = 0;
        },
        is_fullFun() {
            console.log('提交')
            this.share_visible = false
            this.is_full = !this.is_full
            this.$emit('is_fullFun', this.is_full)
        },
        close() {
            this.visible = false
        },
        changeFriendIndex(type) {
            console.log(1)
            let width = document.getElementsByClassName('share-box')[0].offsetWidth * 0.84
            let placeholer_num = Math.round(width / 62)
            let end_index = this.contacters.length - placeholer_num
            if (type == 'increment') {
                if (this.current_friend_index < end_index) {
                    this.current_friend_index++
                    document.getElementsByClassName('scroll-friend')[0].scrollLeft = this.current_friend_index * 62
                }
            } else {
                if (this.current_friend_index > 0) {
                    this.current_friend_index--
                    document.getElementsByClassName('scroll-friend')[0].scrollLeft = this.current_friend_index * 62
                }
            }
        },
        attentionFun(id,creation) {
            
            if (this.submitComplete) return
            this.submitComplete = true
            let that = this
            console.log(id,creation)
            this.$request
                .post('/user-attention/create/' + id)
                .then((res) => {
                    this.submitComplete = false
                    creation.attention = 1
                    this.$message({
                        message: '关注成功',
                        type: 'success',
                        customClass: "messageClass"
                    })
                })
                .catch((error) => {
                    this.submitComplete = false
                })
        },
        
        destruction() {
            this.players.destroy()
        },
        toPath(url) {
            this.$router.push(url)
        },
        switch(item) {
            http://ground.miazh.com/#/pages/short/short?id=965
            //this.init()
            console.log('switch', item.creation_name)
            this.visible = true
            // this.creation = item
            if (this.creation.need_pay) {
                this.players.destroy(false)
                this.players = null
                this.$refs.fee.visible = true
                return true
            }
            // this.$refs.comment.data = []
            // this.$refs.comment.inited = false
            // this.$refs.comment.beforeInit()

            // this.$refs.creation.data = []
            // this.$refs.creation.inited = false
            // this.$refs.creation.beforeInit()
            // this.players.destroy() // 销毁播放器
            this.players.src = this.creation.m3u8_media

            this.$nextTick(() => {
                this.players.play()
            })
            // this.init()
        },
        creationTotal(value) {
            this.total = value
        },
        likeAction(type) {
            let param = {
                creation_id: this.creation.creation_id,
                type: type,
            }
            this.like_loading = true
            this.$request
                .post('/creation/like/create', param)
                .then((res) => {
                    console.log('res', res)
                    this.$emit('setLike', { type: type, index: this.index })
                    if (type) {
                        this.creation.like_count++
                        this.creation.liked_count = 1
                        console.log('点赞')
                    } else {
                        this.creation.like_count--
                        this.creation.liked_count = 0
                        console.log('取消点赞')
                    }
                })
                .catch((err) => {
                    this.$message.error(err.message)
                })
                .finally(() => {
                    this.$nextTick(() => {
                        this.like_loading = false
                    })
                })
        },
        init(creation, index) {
            // alert(creation.need_pay)
            
            if (creation.need_pay) {
                this.$nextTick(()=>{
                    if(this.players!=null){
                        this.players.destroy(false)
                        this.players = null
                    }
                    this.$refs.fee.visible = true
                    
                    return true
                })
            }
            this.share_visible = false
            console.log('最里面的播放器', creation)
            // this.creation = creation
            this.$nextTick(() => {
                //this.$emit('newValue', creation)

                if (this.creation.need_pay) {
                    this.$refs.comment.data = []
                    this.$refs.comment.inited = false
                    this.$refs.comment.beforeInit()
                    this.$refs.fee.visible = true
                    return false
                }
                if (this.creation.m3u8_media != '') {
                    this.players = new Player({
                        id: 'players',
                        url: creation.m3u8_media,
                        autoplay: true,
                        fluid: true,
                        plugins: [HlsPlayer, sortPlugin],
                        ignores: ['replay'],
                        cssFullscreen: false,
                        playbackRate: [0.5, 1, 1.5, 2],
                        controls: true,
                        marginControls: true,
                        commonStyle: {
                            playedColor: '#ffffff',
                            cachedColor: 'transparent',
                            sliderBtnStyle: {
                                background: '#fff',
                            },
                        },
                        // icons: {
                        //     fullscreen: fullIcon,
                        //     volumeMuted: mutedIcon,
                        //     volumeLarge: mutedInvalidIcon,
                        //     volumeSmall: mutedInvalidIcon,
                        // },
                    })
                } else {
                    this.players = new Player({
                        id: 'players',
                        // el:document.querySelector('#dplayer-pop'),
                        url: creation.media_urls[0],
                        autoplay: true,
                        fluid: true,
                        plugins: [sortPlugin],
                        ignores: ['replay'],
                        cssFullscreen: false,
                        playbackRate: [0.5, 1, 1.5, 2],
                        controls: true,
                        marginControls: true,
                        commonStyle: {
                            playedColor: '#ffffff',
                            cachedColor: 'transparent',
                            sliderBtnStyle: {
                                background: '#fff',
                            },
                        },
                        icons: {
                            fullscreen: fullIcon,
                            volumeMuted: mutedIcon,
                            volumeLarge: mutedInvalidIcon,
                            volumeSmall: mutedInvalidIcon,
                        },
                    })
                }
                this.players.play()
                let that = this
                // this.$refs.comment.data = []
                // this.$refs.comment.inited = false
                // this.$refs.comment.beforeInit()

                // this.$refs.creation.data = []
                // this.$refs.creation.inited = false
                // this.$refs.creation.beforeInit()
                this.players.on(Events.ENDED, () => {
                    if (window.is_loop === false || window.is_loop == undefined) {
                        this.players.currentTime = 0
                        that.$emit('next')
                    } else {
                        that.players.replay()
                    }
                })
            })
        },
        shareToFriend(user_id) {
            this.$store.state.system.message = {
                to: user_id,
                payload: {
                    data: JSON.stringify({
                        longItem: {},
                        postItem: {},
                        shortItem: {
                            creation_id: this.creation.creation_id,
                            first_frame: this.creation.first_frame,
                        },
                        type: 'short',
                    }),
                    description: '',
                    extension: '',
                },
            }
            this.share_visible = false
            this.$message({
                message: '已分享',
                type: 'success',
                customClass: 'super-message',
            })

        },
        share() {
            //显示数据
        },
        toRecharge() {
            this.$router.push({ path: '/wallet/recharge' })
        },
        openAd(url) {
            window.open(url)
        },
        copyLink() {
            let text = 'http://ground.miazh.com/#/pages/short/short?id=' + this.creation.creation_id
            const inputElement = document.createElement('input')
            inputElement.value = text
            document.body.appendChild(inputElement)
            inputElement.select()
            document.execCommand('copy')
            document.body.removeChild(inputElement)
            this.$message({
                message: '复制成功',
                type: 'success',
                customClass: 'super-message',
            })
            this.share_visible = false
        },
        donePay(value) {
            let param = {
                value: value,
                index: this.index,
            }
            this.$emit('setMedia', param)
        },
        sideVideo(value) {
            // this.$refs.comment.data = []
            // this.$refs.comment.inited = false
            // this.$refs.comment.beforeInit()
            // this.players.src = value.m3u8_media

            // this.$nextTick(() => {
            //     this.players.play()
            // })
        },
    },
}
</script>

<style lang="scss" scoped>
/deep/.el-dialog__header {
    padding: 0;
}

/deep/.el-dialog__body {
    padding: 0;
}

/deep/.el-dialog {
    margin: 0;
}

/deep/.el-progress-bar__outer {
    height: 2px !important;
    background: #999 !important;

    border-radius: 0px !important;
}

/deep/.el-avatar--circle {
    border: 1px solid #ff1c6d;
    border-radius: 100%;
}

.main {
    z-index: 10000;
    background: #151225;
    height: calc(100vh - 4rem - 4px);
    overflow-y: hidden;
}

.video-window {
    position: relative;

    &-close {
        position: absolute;
        border-radius: 100%;
        background: #060316;
        top: 30px;
        left: 40px;
        z-index: 10001;
    }

    &-close:hover {
        background: rgba(255, 255, 255, 0.6);
    }

    &-players {
        background-size: 100% 100% !important;
        position: absolute;
        top: 0;
        width: 100%;
    }

    &-process {
        background: #060316;
        position: relative;
        z-index: 1000;

        &-bar {
            top: -2px;
        }
    }
}

.comment-window {
    position: relative;
    z-index: 1000;
    height: 100%;
}

.author-info {
    position: absolute;
    bottom: 10%;
    left: 40px;
    z-index: 1000;
}

.more-info {
    position: absolute;
    right: 40px;
    top: 20%;
    z-index: 1000;

    &-attention {
        top: -2px;
        right: -5px;
        background: #ff1c6d;
        padding: 4px;
        border-radius: 100%;
        color: #fff;
        width: 10px;
        height: 10px;
        line-height: 7px;
        text-align: center;
    }

    &-next-prev {
        padding: 7px 0px;
        background: rgba(0, 0, 0, 0.2);
        text-align: center;
        border-radius: 23px;
        transform: scale(0.8);
    }
}

#players {
    z-index: 100;
    background: transparent;
    padding-top: 59.25% !important;
}

// /deep/.xgplayer video {
//     z-index: 10000;
// }
.el-row,
.el-col,
.video-window {
    height: 100%;
}

.voice-process {
    position: absolute;
    top: 11px;
    z-index: 1000;
    right: -68px;
    padding: 10px;
    border-radius: 4px;
    background: #24203c;
    transform: rotate3d(1, 1, 1, 1);
    transform-origin: top left;
    transform: rotate(-90deg);
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    text-align: center;

    &-limit {
        transform: rotate(90deg);
        padding-bottom: 10px;
    }
}

.choose-speed {
    top: -164px;
    position: absolute;
    border-radius: 10px;
    left: -40px;
    background: #24203c;
}

.el-col-6,
.el-col-18,
.el-col-24,
.el-col-0 {
    transition: 0.2s all;
}

/deep/.xg-get-fullscreen,
/deep/.xg-volume,
/deep/.xg-volume-small,
/deep/.xg-volume-mute {
    width: 24px !important;
}

/deep/.el-tabs__item {
    color: #8b8b8b;
    font-size: calc(0.89286vw + 1.14286px);
}

/deep/.el-tabs__item.is-active {
    color: #ffffff;
}

/deep/.el-tabs__active-bar {
    background: #fff;
    width: 30px !important;
    margin-left: 11px !important;
    height: 1px;
}

/deep/.el-tabs__nav-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #8b8b8b;
    z-index: 1;
}

/deep/.el-tabs__nav {
    margin-left: 30px;
}

/deep/.xgplayer {
    position: static;
}

/deep/.xg-video-container {
    z-index: 100;
}

/deep/.xgplayer-controls {
    z-index: 101;
}

.el-tabs--top,
.el-tabs__content,
.tab-comment {
    height: 100%;
}

// /deep/.xgplayer video {
//     height: calc(100% - 50px) !important;
// }
.share-card {
    left: 73%;
    top: calc((100vh - 4rem - 4px) * 0.2 + 201px);
    z-index: 10000000;
    padding: 20px;
    background: #272337;
    border-radius: 10px;
    border: 1px solid #353047;
    width: 20%;
}

.scroll-friend {
    overflow-x: scroll;
}

.scroll-friend::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
}

.need-recharge {
    position: absolute;
    transition: 0.2s all;
    background: linear-gradient(to bottom, #ff5994, #ff1c6d);
    width: 200px;
    height: 210px;
    left: calc(50% - 100px);
    top: calc(50% - 105px);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;

    &-close {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    &-recharge {
        position: absolute;
        bottom: 15px;
        color: #ff1c6d;
        background: #fff;
        width: 80%;
        text-align: center;
        padding: 5px 0px;
        border-radius: 4px;
    }
}
</style>